<template>
    <div class="card-box">
        <el-row :gutter="10">
            <el-col :span="4" v-for="(item, index) in cardData" :key="index">
                <div @click="toListPage(item)">
                    <p class="title">{{item.title}}</p>
                    <p class="card-data">{{item.data}}</p>
                    <p class="right-bottom" v-show="item.scale || item.scale === 0">占比：{{item.scale | toPercentage}}</p>
                    <el-tooltip class="item" effect="light" placement="top">
                        <div slot="content" class="card-tips" v-html="item.tips"></div>
                        <span class="card-icon" v-show="item.tips"><i class="el-icon-warning-outline"></i></span>
                    </el-tooltip>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {toPercentage} from '@/utils/filters'

    export default {
        name: 'index',
        props: ['cardData'],
        data () {
            return {}
        },
        created () {
        },
        mounted () {
        },
        methods: {
            /**
             * 页面跳转
             * @param item 卡片数据
             */
            toListPage (item) {
                let query = JSON.parse(JSON.stringify(this.$store.state.search.searchForm[this.$route.name]))
                let params = {}
                // 设置目标页筛选条件为当前页面条件(全局的搜索框和form表单)
                if (query) {
                    params = {
                        orgId: query.orgId,
                        department: query.department,
                        depName: query.depName,
                        start: query.start,
                        end: query.end,
                        dep: query.dep,
                        timeUnit: query.timeUnit,
                        yearMonth: query.yearMonth,
                        quarter: query.quarter
                    }
                }
                // 设置目标页的tabs
                if (item.tab) {
                    this.setGetStore(item.pageName, {tab: item.tab}, params)
                }
                // 设置目标页的独立搜索条件
                if (item.query) {
                    this.setGetStore(item.pageName, item.query, params)
                }
                this.$router.push({name: item.pageName})
            }
        },
        filters: {
            toPercentage
        }
    }
</script>

<style scoped lang="scss">
    .card-box {
        .el-col {
            height: 120px;
            margin-bottom: 10px;
            border-radius: 2px;
            div {
                background: #fff;
                height: 100%;
                padding-top: 10px;
                position: relative;
                cursor: pointer;
                p {
                    margin: 0;
                }
                .title {
                    font-size: 16px;
                    font-weight: 500;
                    color: #212225;
                    line-height: 22px;
                    margin-left: 12px;
                }
                .card-data {
                    margin-top: 20px;
                    text-align: center;
                    font-size: 28px;
                    font-weight: 500;
                    color: #3A9BFF;
                    line-height: 40px;
                }
                .right-bottom {
                    margin:  7px 10px 0 0;
                    font-size: 12px;
                    color: #44464A;
                    text-align: right;
                }
                .card-icon {
                    position: absolute;
                    padding: 5px;
                    top: 8px;
                    right: 8px;
                    font-size: 16px;
                    outline: none;
                }
            }
            &:nth-child(2) {
                .card-data {
                    color: #F1A02A;
                }
            }
            &:nth-child(3), &:nth-child(8) {
                .card-data {
                    color: #FF4532;
                }
            }
        }
    }
</style>
<style lang="scss">
    .card-tips {
        max-width: 200px;
    }
</style>
